<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div style="width: 100%;">
      <a-row type="flex" style="justify-content: space-between;align-items: center;">
        <a-col flex="150px">
          <h1></h1>
        </a-col>
        <a-col>
          <a @click="changeDate(dateType.yesterday, null, null)" style="margin-right: 24px;">昨日</a>
          <a @click="changeDate(dateType.week, null, null)" style="margin-right: 24px;">近7天</a>
          <a @click="changeDate(dateType.month, null, null)" style="margin-right: 24px;">近30天</a>
          <a @click="changeDate(dateType.total, null, null)" style="margin-right: 24px;">总计</a>
          <a-range-picker :style="{width: '256px'}" @change="customDateChoice"/>
        </a-col>
      </a-row>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        :scroll="{x:true}"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="text" height="50px" alt="" style="max-width:120px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="rankSlot" slot-scope="text, record, index">
          <span>{{ (ipagination.current - 1) * ipagination.pageSize + parseInt(index) + 1 }}</span>
        </template>

      </a-table>

    </div>

  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate.vue'
  import {getAction, httpAction} from '@/api/manage'


  export default {
    name: 'GmsGoodSaleRankList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      JDate
    },
    data () {
      return {
        description: '销量排行榜',
        // 表头
        columns: [
          {
            title: '排名',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            scopedSlots: { customRender: 'rankSlot' }
          },
          {
            title:'商品图片',
            align:"center",
            dataIndex: 'imgUrl',
            scopedSlots: { customRender: 'imgSlot' }
          },
          {
            title:'商品名称',
            align:"center",
            dataIndex: 'title',
            width: 250,
          },
          {
            title:'销售数量',
            align:"center",
            dataIndex: 'saleCount',
          },
          {
            title:'支付金额',
            align:"center",
            dataIndex: 'payAmount',
          },
        ],
        url: {
          list: "/statistics/gmsGoodSaleRank",
        },
        dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      initParam() {
        if(this.queryParam.type === undefined) {
          this.queryParam.type = this.dateType.total;
        }
      },
      customDateChoice(range) {
        this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
      },
      changeDate(type, start, end) {
        this.queryParam.type = type;
        this.queryParam.dayStart = start;
        this.queryParam.dayEnd = end;
        this.loadData(1);
      },
      loadData(arg) {
        if (!this.url.list) {
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        this.initParam();
        var params = this.getQueryParams()//查询条件

        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
            this.onClearSelected()
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>